<template>
<div>
<Modal v-if="party_type=='个人'" v-model="modalEdit" fullscreen @on-cancel="handleModalEditCancel">
	<template #header>
		<Icon custom="iconfont icon-Word"/>&nbsp;授权委托书&nbsp;
	</template>
	<h3>个人类型案件无法使用授权委托书</h3>
	<template #footer><Space>
		<Button shape="circle" @click="handleModalEditCancel">取消</Button>
	</Space></template>
</Modal>
<Modal v-else v-model="modalEdit" fullscreen @on-cancel="handleModalEditCancel">
	<template #header>
		<Icon custom="iconfont icon-Word"/>&nbsp;授权委托书&nbsp;
	</template>
	<Row justify="center"><Col span="20">
	<Card title="委托人" icon="ios-bookmark">
		<template #extra>
			{{baseform.party_name}}&nbsp;涉嫌&nbsp;{{baseform.cause_name}}
		</template>
		<Alert show-icon>
			委托人：{{baseform.client_name}}&nbsp;&nbsp;{{baseform.client_id}}
			<template #desc>
			<br><u>{{baseform.enterprise}}</u>法定代表人
			</template>
		</Alert>
		<Row>
			<Col span="12"><Space>
				<span>职务：</span>
				<Input v-model="baseform.client_job" placeholder="输入职务"/>
			</Space></Col>
		</Row><br>
	</Card>
	<br>
	<Card title="受委托人" icon="ios-bookmark">
		<Row>
		    <Col span="12"><Space>
			<span>*受委托人</span>
			<AutoComplete v-model="baseform.trustee_name"  @on-search="handleSearchPerson"
			 @on-change="handlePersonChange">
				<Option v-for="n in optionsPerson" :value="n.person_name" 
				:key="n.person_id" @click="handleReloadData(n)">
					<span>{{ n.person_name }}</span>
					<span style="float: right;color: #999;">{{ n.person_id }}</span>
				</Option>
			</AutoComplete>
			<Button shape="circle" icon="md-add" @click="handleAddPerson"></Button>
			<span>{{baseform.trustee_id}}</span>
			</Space></Col>
		</Row><br>
		<Row>
			<Col span="24"><Space>
			<span>工作单位：</span>
			<Input v-model="baseform.trustee_party" placeholder="输入单位"/>
			<span>职务：</span>
			<Input v-model="baseform.trustee_job" placeholder="输入职务"/>
			<span>职称：</span>
			<Input v-model="baseform.trustee_title" placeholder="输入职称"/>
			</Space></Col>
		</Row>
		<template #extra>
			提交日期：<DatePicker v-model="baseform.date1" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
		</template>
	</Card>
	</Col></Row>
	<template #footer><Space>
		<Button shape="circle" @click="handleModalEditCancel">取消</Button>
		<Button type="primary" shape="circle" @click="handleModalEditOK">提交</Button>
	</Space></template>
	
	<AddPerson ref="addPerson" @loadData="handleReloadData"></AddPerson>
</Modal>
</div>
</template>

<script>
import {dateUtils,appendDoc} from '@/libs/tools.js'
import config from '@/config'
import AddPerson from '@/components/AddPerson'
export default{
	data(){
		return {
			modalEdit:true,
			party_type:'法人',
			optionsPerson:[],
			baseform:{}
		}
	},
	components: {
		AddPerson
    },
	methods:{
		handleModalEditCancel(){
			console.info("cancle")
			this.$router.go(-1)
		},
		handleModalEditOK(){
			console.info("ok")
			let data={...this.baseform}
			dateUtils.formatDates(data,"date1")
			data.docs=appendDoc(data.docs,"doc008")
			console.info(data)
			this.$axios.post('mainCase1CreateDoc008.action',data).then(res=>{
				window.open(config.baseUrl+res.data,'_blank')
				this.$router.go(-1)
			})
		},
		handleAddPerson(){
			this.$refs.addPerson.open()
		},
		handleSearchPerson(k){
			this.$axios.post("mainCase1PersonSelect.action",{int1:0,str1:k})
			.then(res=>{
				this.optionsPerson=res.data.slice(0,5)
			})
		},
		handlePersonChange(value){
			if(value=='')this.optionsPerson=[]
		},
		handleReloadData(data){
			this.baseform.trustee_name=data.person_name
			this.baseform.trustee_id=data.person_id
			
		},
		handleSearchPerson(k){
			this.$axios.post("mainCase1PersonSelect.action",{int1:0,str1:k})
			.then(res=>{
				this.optionsPerson=res.data.slice(0,5)
			})
		},
		handlePersonChange(value){
			if(value=='')this.optionsPerson=[]
		}
	},
	mounted(){
		this.party_type=this.$route.query.party_type
		if(this.party_type=='个人')return
		
		this.$axios.post('mainCase1GetDoc008.action',{
			case_no:this.$route.query.case_no,
			party_type:this.$route.query.party_type
		}).then(res=>{
			this.baseform={...this.baseform,...res.data}
			dateUtils.dateNotNull(this.baseform,"date1")
		})
	}
}
</script>

<style>
</style>